<!--
 * @Author: YMJ
 * @Date: 2020-10-30 10:47:06
-->
<template>
  <div>
    <!-- 列表 -->
    <tab-list
      ref="list"
      :searchs="searchs"
      :list-hedar="listHedar"
      :params="params"
      :api-function="apiFunction"
      other-show
      @init-params="initParams"
      @add-list="$refs.focus.setToastShow(true)"
    >
      <el-image
        slot="focusTopicImage"
        slot-scope="scope"
        style="width: 50px; height: 50px"
        fit="fit"
        :src="scope.value.focusTopicImage"
        :preview-src-list="[scope.value.focusTopicImage]"
      />
      <span
        slot="focusTopicStatus"
        slot-scope="scope"
        :style="`color:${
          scope.value.focusTopicStatus === '0' ? '#F56C6C' :
          scope.value.focusTopicStatus === '1' ? '#67C23A' : '#909399'
        }`"
      >
        {{
          scope.value.focusTopicStatus === '0' ? '未上架' :
          scope.value.focusTopicStatus === '1' ? '已上架' :
          scope.value.focusTopicStatus === '2' ? '已下架' : ''
        }}
      </span>
      <template slot="operate" slot-scope="scope">
        <el-button type="text" size="small" @click="openEditBox(scope.value.focusTopicId)">编辑</el-button>
        <el-button
          type="text"
          size="small"
          @click="focusTopicFrame(!(scope.value.focusTopicStatus === '1'), scope.value.focusTopicId)"
        >
          {{ scope.value.focusTopicStatus === '1' ? '下架' : '上架' }}
        </el-button>
      </template>
    </tab-list>
    <el-dialog
      title="编辑焦点话题"
      :visible.sync="toastShow"
      width="40%"
      :close-on-click-modal="false"
      @open="$refs.form && $refs.form.resetForm()"
    >
      <edit-form
        ref="form"
        :rules="rules"
        :edit-list="editList"
        :form="form"
        @on-submit="addOrEdit()"
        @uploade="(url, config) => {form.focusTopicImage = url;fileConfig = config}"
      />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="$refs.form.ruleFrom()">确 定</el-button>
        <el-button @click="toastShow = false">取 消</el-button>
      </span>
    </el-dialog>
    <add-focus-topic ref="focus" @add="addOrEdit" />
  </div>
</template>

<script>
// 组件
import tabList from '@/components/admin/tab-list.vue'
import editForm from '@/components/admin/edit-form.vue'
import addFocusTopic from './components/add-focus-topic.vue'
// 公共方法
import { asyncApiFun, openMessageBox, initEditList } from '@/utils/utils'
// 接口
import { focusTopicList, focusTopicFrame, focusTopicEdit, focusTopicDetail } from '@/api/operate.js'
// 页面配置
import { listHedar, searchs, searchs2, editList, rules } from './config/focusTopic.config.js'
export default {
  components: {
    tabList,
    editForm,
    addFocusTopic
  },
  data() {
    return {
      fileConfig: {},
      toastShow: false,
      editList,
      rules: rules,
      form: {},
      searchs,
      searchs2,
      params: {},
      listHedar,
      apiFunction: focusTopicList,
      detail: null
    }
  },
  methods: {
    // 上下架
    focusTopicFrame(status, id) {
      const _content = status ? '上架后，焦点话题默认排序为1，是否确认？' : '下架后，焦点话题将不在用户端可见，是否确认？'
      const _title = status ? '上架焦点话题' : '下架焦点话题'
      openMessageBox({
        content: _content,
        title: _title
      }, async boole => {
        if (boole) {
          const [res] = await asyncApiFun(focusTopicFrame, { id, status })
          if (res) this.$refs.list.getList()
        }
      })
    },
    // 打开新增或者编辑弹窗
    openEditBox(id) {
      this.getDetail(id)
      this.toastShow = true
    },
    // 获取焦点话题详情
    async getDetail(id) {
      let _detail = null
      if (id) {
        const [res] = await asyncApiFun(focusTopicDetail, id)
        if (res) _detail = res.data
      }
      this.detail = _detail
      // 重置编辑框数据
      this.form = initEditList(this.editList, this.detail)
    },
    async addOrEdit(params) {
      let _title = '添加成功'
      if (!params) {
        params = {
          ...this.form,
          focusTopicId: this.detail.focusTopicId
        }
        _title = '修改成功'
      }
      const [res] = await asyncApiFun(focusTopicEdit, params, this.fileConfig)
      if (res) {
        this.$message.success(_title)
        this.$refs.list.getList()
        this.$refs.focus.setToastShow(false)
        this.toastShow = false
      }
    },
    initParams(param) {
      this.params = param
    }
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog__body{
    padding: 10px 20px;
  }
</style>
